<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学校论坛首页</title>
    <link rel="stylesheet" href="css/newcss.css">
    <link rel="stylesheet" id="skin-style" href="css/newcss.css"> <!-- 默认先加载浅色主题样式 -->
</head>

<body>
    <!-- 页面头部，包含论坛标题、横向菜单栏和登录选项 -->
    <header>
        <div class="header-container">
            <h1 class="logo">学校论坛</h1>
            <nav class="navbar">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="jsp/campusLife.jsp">校园生活</a></li>
                    <li><a href="jsp/clubLife.jsp">社团活动</a></li>
                    <li><a href="jsp/post.jsp">发表帖子</a></li>
                    <li><a href="jsp/myPosts.jsp">我的消息</a></li>
                    <li><a href="jsp/ditu.jsp">地图显示</a></li>
                </ul>
            </nav>
            <a href="jsp/login.jsp" class="login-link">登录</a>
            <div id="theme-toggle-container">
                <button id="theme-toggle" onclick="showThemeOptions()">切换主题</button>
                <div id="theme-options" style="display: none;">
                    <button class="theme-option" onclick="changeTheme('dark')">深色</button>
                    <button class="theme-option" onclick="changeTheme('yellow')">黄色</button>
                    <button class="theme-option" onclick="changeTheme('light-green')">浅绿色</button>
                    <button class="theme-option" onclick="changeTheme('light')">浅色</button>
                </div>
            </div>
        </div>
    </header>

    <!-- 主体内容部分 -->
    <main>
        <!-- 帖子检索 -->
        <section class="search-section">
            <form method="get" action="jsp/searchPosts.jsp">
                <label for="search-input">搜索帖子:</label>
                <input type="text" id="search-input" name="query" placeholder="请输入关键词" required>
                <input type="submit" value="搜索">
            </form>
        </section>

        <!-- 推荐帖子 -->
        <section class="featured-posts">

            <article class="post">
                <img src="images/tl1.JPG" alt="学习讨论帖配图">
                <h2>热门学习讨论帖</h2>
                <p class="author">发布者: <%= "user" %>  发布时间: <%= "2024-12-12" %> </p>
                <p class="excerpt">这是关于某学科学习难点的讨论帖，大家快来一起交流呀……</p>
                <a href="jsp/campusLife.jsp?id=1" class="read-more">查看详情</a>
            </article>
            <article class="post">
                <img src="images/ms1.JPG" alt="校园美食配图">
                <h2>校园美食分享</h2>
                <p class="author">发布者: <%= "user" %>  发布时间: <%= "2024-12-13" %> </p>
                <p class="excerpt">今天在食堂发现了超好吃的一道菜，快来看看是啥吧……</p>
                <a href="jsp/campusLife.jsp?id=2" class="read-more">查看详情</a>
            </article>
        </section>

        <!-- 最新活动 -->
        <section class="latest-activities">
            <h2>最新活动</h2>
            <div class="activity-item">
                <img src="images/xy.jpg" alt="活动1配图">
                <p>即将举办校园歌手大赛，快来报名参加吧！</p>
            </div>
            <div class="activity-item">
                <img src="images/ydh.jpg" alt="活动2配图">
                <p>校园运动会筹备中，期待同学们踊跃参与。</p>
            </div>
        </section>
    </main>

    <!-- 页面底部，包含版权信息等 -->
    <footer>
        <p>&copy; 2024 学校论坛版权所有</p>
    </footer>

    <script>
        function showThemeOptions() {
            var themeOptions = document.getElementById('theme-options');
            themeOptions.style.display = 'block';
            // 设置主题选择框的位置在切换主题按钮下方
            var themeToggle = document.getElementById('theme-toggle');
            var rect = themeToggle.getBoundingClientRect();
            themeOptions.style.top = rect.bottom + 'px';
            themeOptions.style.left = rect.left + 'px';
        }

        function changeTheme(theme) {
            var skinLink = document.getElementById('skin-style');
            switch (theme) {
                case 'light':
                    skinLink.href = 'css/skin-light.css';
                    break;
                case 'dark':
                    skinLink.href = 'css/skin-dark.css';
                    break;
                case 'yellow':
                    skinLink.href = 'css/skin-yellow.css';
                    break;
                case 'light-green':
                    skinLink.href = 'css/skin-light-green.css';
                    break;
            }
            // 切换后隐藏主题选择菜单
            document.getElementById('theme-options').style.display = 'none';
        }
    </script>
</body>

</html>
